<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title> FlatLab - Bootstrap 3 Responsive Admin Template </title>
	
	<meta name="description" content="this description">
	<meta name="author" content="ThemeBucket">
	<meta name="copyright" content="ThemeBucket">
	<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
	<meta name="date" content="2013-08-24T00:00:00+02:00">
	
	<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
	<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
	<script src="assets/js/google-code-prettify/prettify.js"></script>

	
	
	<script src="assets/js/jquery.js"></script>
	
	<script src="assets/js/jquery.scrollTo.js"></script>
	<script src="assets/js/jquery.easing.js"></script>
	
	<script>document.createElement('section');var duration='500',easing='swing';</script>
	<script src="assets/js/script.js"></script>
	
	<style>
		html{background-color:#fff;color:#383838;}
		::-moz-selection{background:#ff6c60;color:#fff;}
		::selection{background:#ff6c60;color:#fff;}
		#documenter_sidebar #documenter_logo{background-image:url();}
		a{color: #db6e62;}
		.btn {
			border-radius:3px;
		}
		.btn-primary {
			  background-image: -moz-linear-gradient(top, #FFFFFF, #ff6c60);
			  background-image: -ms-linear-gradient(top, #FFFFFF, #ff6c60);
			  background-image: -webkit-gradient(linear, 0 0, 0 FFFFFF%, from(#ff6c60), to(#ff6c60));
			  background-image: -webkit-linear-gradient(top, #FFFFFF, #ff6c60);
			  background-image: -o-linear-gradient(top, #FFFFFF, #ff6c60);
			  background-image: linear-gradient(top, #FFFFFF, #ff6c60);
			  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#ff6c60', GradientType=0);
			  border-color: #ff6c60 #ff6c60 #ff6c60;
			  color:#FFFFFF;
		}
		.btn-primary:hover,
		.btn-primary:active,
		.btn-primary.active,
		.btn-primary.disabled,
		.btn-primary[disabled] {
		  border-color: #FFFFFF #FFFFFF #bfbfbf;
		  background-color: #ff6c60;
		}
		hr{border-top:1px solid #fff;border-bottom:1px solid #ccc;}
		#documenter_sidebar, #documenter_sidebar ul a{background-color:#2a3542;color:#fff;}
		#documenter_sidebar ul li{margin-bottom: 1px }
		#documenter_sidebar ul a{color:#fff; font-weight: normal}
		#documenter_sidebar ul a:hover{background:#ff6c60;color:#fff;}
		#documenter_sidebar ul a.current{background:#ff6c60;color:#fff;}
		#documenter_copyright{display:block !important;visibility:visible !important;}

        code.code-format {
            background-color: #F7F7F9;
            border: 1px solid #E1E1E8;
            color: #DD1144;
            padding: 2px 4px;
            white-space: nowrap;
        }
	</style>
	
</head>
<body class="documenter-project-frame2frame">
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ul id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
				
			<li><a href="#overview" title="Overview">Overview</a></li>
			<li><a href="#template" title="Template">Template</a></li>
			<li><a href="#features" title="features">Features</a></li>
			<li><a href="#folder_structure" title="folder_structure">Folder Structure</a></li>
			<li><a href="#html_structure" title="html_structure">Html Structure</a></li>
			<li><a href="#top_menu" title="top_menu">Top Menu</a></li>
			<li><a href="#main_menu" title="main_menu">Main Menu</a></li>
			<li><a href="#font" title="font">Font</a></li>
			<li><a href="#new_page" title="new page">New Page</a></li>
			<li><a href="#js_initial" title="Javascript Initialization">Javascript Initialization</a></li>
			<li><a href="#reference" title="reference">Reference</a></li>
			<li><a href="#upgrade" title="upgrade">Upgrade</a></li>
			<li><a href="#end_documentation" title="end_documentation">End of Documentation</a></li>

		</ul>
		<div id="documenter_copyright">Copyright TheVectorLab 2013<br>
		made with the <a href="http://rxa.li/documenter">Documenter v2.0</a> 
		</div>
	</div>
	<div id="documenter_content">
        <section id="documenter_cover">
            <h1> FlatLab - Bootstrap 3 Responsive Admin Template </h1>
            <h2> Documentation v1.3.3</h2>
            <hr>
            <ul>
                <li>By:  Vector Lab </li>
                <li>Contact: <a href="mailto:dkmosa@gmail.com">dkmosa@gmail.com</a></li>
                <li>Demo: <a target="_blank" href="http://thevectorlab.net/flatlab">http://thevectorlab.net/flatlab</a>  </li>
            </ul>
            <p></p>
        </section>
	
        <section id="overview">
            <div class="page-header"><h3>Overview</h3><hr class="notop"></div>
            <p>
                FlatLab is a Premium Admin Dashboard template with real flat design concept. Flat color, clean content placement, easy customization and professional coding is its core power.
            </p>
            <p>
                FlatLab is a fully responsive admin dashboard template built with Latest Twitter Bootstrap 3.1.0 Framework, modern web technology HTML5 and CSS3. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. This theme is very lightweight and easy customizable which is basically designed for the developers who want to customize it with just a finger snap . FlatLab can be used for all type of web applications like custom admin panel, project management system, admin dashboard, application backend, CMS, CRM, business website, corporate, portfolio, blog etc. A large number of widget are included here to make your work easier. FlatLab works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone device.
            </p>
        </section>
        <section id="template">
            <div class="page-header"><h3>Template</h3><hr class="notop"></div>

            <p>
                <img src="assets/css/img/dashboard_home.jpg" width="98%"/>
            </p>

        </section>
        <section id="features">
            <div class="page-header"><h3>Features</h3><hr class="notop"></div>

            <ul>
                <li>Built with Bootstrap 3.0.2</li>
                <li>Html5 Markup & CSS3</li>
                <li>Fully Responsive & Interactive</li>
                <li>Flat UI with clean style</li>
                <li>Huge Components</li>
                <li>Multilevel menu</li>
                <li>Mobile widgets</li>
                <li>Latest jQuery v1.10.2 </li>
                <li>jQuery NiceScroll</li>
                <li>jQuery Sparklines</li>
                <li>Morris Chart</li>
                <li>Chartjs</li>
                <li>xChart</li>
                <li>jQuery Sortable</li>
                <li>Flot Charts</li>
                <li>jQuery Easy Pie Chart</li>
                <li>jquery-validation-1.11.1</li>
                <li>Date, date range & color Picker(Bootstrap Date, range & color Picker)</li>
                <li>CKEditor</li>
                <li>Integrated Full Calendar(jQuery Full Calendar)</li>
                <li>Notifications(jQuery Gritter)</li>
                <li>Form Component</li>
                <li>Multi Select </li>
                <li>Timepicker</li>
                <li>Spinner</li>
                <li>WYSIWYG Editors </li>
                <li>Image Cropping</li>
                <li>Form wizard (jquery stepy)</li>
                <li>Form Validation</li>
                <li>jQuery File Upload</li>
                <li>Inline Editor</li>
                <li>Dropzone file upload</li>
                <li>Google maps</li>
                <li>Nestable</li>
                <li>Bootstrap FuelUX Tree</li>
                <li>jQuery ScrollTo</li>
                <li>jQuery Knob</li>
                <li>Slider (jQuery Slider)</li>
                <li>jQuery Tagsinput</li>
                <li>Bootstrap Switch</li>
                <li>Owl.carousel</li>
                <li>Dynamic Table</li>
                <li>Responsive Table</li>
                <li>Advanced Table</li>
                <li>Editable Table</li>
                <li>Font Icons(Font Awesome 4.0.3) & Glyphicons</li>
                <li>Custom Radiobutton, Checkbox</li>
                <li>Google font - OpenSans</li>
                <li>Well structured code</li>
                <li>Detailed Documentation</li>
            </ul>
        </section>

        <section id="folder_structure">
            <div class="page-header"><h3>Folder Structure</h3><hr class="notop"></div>
            <p class="plain">
                <strong>FlatLab/<br>
                    |-- css/<br>
                    |-- js/<br>
                    |-- img/<br>
                    |-- fonts/<br>
                    |-- assets/
                </strong>
            </p>
        </section>

        <section id="html_structure">
            <div class="page-header"><h3>HTML Structure</h3><hr class="notop"></div>
            <h4> Page Head</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;Mosaddek&quot;&gt;
    &lt;meta name=&quot;keyword&quot; content=&quot;FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina&quot;&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;img/favicon.png&quot;&gt;

    &lt;title&gt;FlatLab - Flat &amp; Responsive Bootstrap Admin Template&lt;/title&gt;

    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;css/bootstrap-reset.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;!--external css--&gt;
    &lt;link href=&quot;assets/font-awesome/css/font-awesome.css&quot; rel=&quot;stylesheet&quot; /&gt;
    &lt;link href=&quot;assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;/&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/owl.carousel.css&quot; type=&quot;text/css&quot;&gt;
    &lt;!-- Custom styles for this template --&gt;
    &lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;css/style-responsive.css&quot; rel=&quot;stylesheet&quot; /&gt;

    &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries --&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src=&quot;js/html5shiv.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;js/respond.min.js&quot;&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;</pre>

            </pre>

            <h4> Header</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;!--header start--&gt;
  &lt;header class=&quot;header white-bg&quot;&gt;
    &lt;div class=&quot;sidebar-toggle-box&quot;&gt;
        &lt;div data-original-title=&quot;Toggle Navigation&quot; data-placement=&quot;right&quot; class=&quot;icon-reorder tooltips&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;!--logo start--&gt;
    &lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;Flat&lt;span&gt;lab&lt;/span&gt;&lt;/a&gt;
    &lt;!--logo end--&gt;
    &lt;div class=&quot;nav notify-row&quot; id=&quot;top_menu&quot;&gt;
        &lt;!--  notification goes here --&gt;
    &lt;/div&gt;
    &lt;div class=&quot;top-nav &quot;&gt;
        &lt;!--search &amp; user info goes here--&gt;
    &lt;/div&gt;
&lt;/header&gt;
&lt;!--header end--&gt;</pre>

            </pre>

            <h4> Sidebar</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;!--sidebar start--&gt;
    &lt;aside&gt;
        &lt;div id=&quot;sidebar&quot;  class=&quot;nav-collapse &quot;&gt;
             &lt;!-- sidebar menu goes here--&gt;
        &lt;/div&gt;
    &lt;/aside&gt;
&lt;!--sidebar end--&gt;</pre>
            </pre>

            <h4> Content</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;!--main content start--&gt;
  &lt;section id=&quot;main-content&quot;&gt;
      &lt;section class=&quot;wrapper&quot;&gt;
          &lt;!--main content goes here--&gt;
      &lt;/section&gt;
  &lt;/section&gt;
&lt;!--main content end--&gt;</pre>
            </pre>


            <h4> End of Page</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;!-- js placed at the end of the document so the pages load faster --&gt;
    &lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/jquery.dcjqaccordion.2.7.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/jquery.scrollTo.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/jquery.nicescroll.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/jquery.sparkline.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/owl.carousel.js&quot; &gt;&lt;/script&gt;



    &lt;!--common script for all pages--&gt;
    &lt;script src=&quot;js/common-scripts.js&quot;&gt;&lt;/script&gt;
    &lt;!--script for this page only--&gt;
    &lt;script src=&quot;js/sparkline-chart.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;js/easy-pie-chart.js&quot;&gt;&lt;/script&gt;

  &lt;script&gt;

  &lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
</pre>


            </pre>

            <h4> CSS Code Comment Sample</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="css">
/*login page*/

.login-body {
    background-color: #f1f2f7;
}

.form-signin {
    max-width: 330px;
    margin: 100px auto 0;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
</pre>

            </pre>

            <h4> Javascript Code Comment Sample</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="js">
//    sidebar dropdown menu

    jQuery(&#39;#sidebar .sub-menu &gt; a&#39;).click(function () {
        var last = jQuery(&#39;.sub-menu.open&#39;, $(&#39;#sidebar&#39;));
        last.removeClass(&quot;open&quot;);
        jQuery(&#39;.arrow&#39;, last).removeClass(&quot;open&quot;);
        jQuery(&#39;.sub&#39;, last).slideUp(200);
        var sub = jQuery(this).next();
        if (sub.is(&quot;:visible&quot;)) {
            jQuery(&#39;.arrow&#39;, jQuery(this)).removeClass(&quot;open&quot;);
            jQuery(this).parent().removeClass(&quot;open&quot;);
            sub.slideUp(200);
        } else {
            jQuery(&#39;.arrow&#39;, jQuery(this)).addClass(&quot;open&quot;);
            jQuery(this).parent().addClass(&quot;open&quot;);
            sub.slideDown(200);
        }
        var o = ($(this).offset());
        diff = 200 - o.top;
        if(diff&gt;0)
            $(&quot;#sidebar&quot;).scrollTo(&quot;-=&quot;+Math.abs(diff),500);
        else
            $(&quot;#sidebar&quot;).scrollTo(&quot;+=&quot;+Math.abs(diff),500);
    });</pre>


            </pre>


        </section>

        <section id="top_menu">
            <div class="page-header"><h3> Top Menu</h3><hr class="notop"></div>
            <p>
                <img src="assets/css/img/top-menu.jpg" width="98%"/>
            </p>
        </section>

        <section id="main_menu">
            <div class="page-header"><h3> Main Menu</h3><hr class="notop"></div>
            <p>
                <img src="assets/css/img/main-menu.jpg" width="98%"/>
            </p>
            <h4> Main Menu HTML</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
        &lt;!-- sidebar menu start--&gt;
              &lt;ul class=&quot;sidebar-menu&quot;&gt;
                  &lt;li class=&quot;active&quot;&gt;
                      &lt;a class=&quot;&quot; href=&quot;index.html&quot;&gt;
                          &lt;i class=&quot;icon-dashboard&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Dashboard&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;&quot;&gt;
                          &lt;i class=&quot;icon-book&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;UI Elements&lt;/span&gt;
                          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;general.html&quot;&gt;General&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;buttons.html&quot;&gt;Buttons&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;widget.html&quot;&gt;Widget&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;slider.html&quot;&gt;Slider&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;font_awesome.html&quot;&gt;Font Awesome&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;&quot;&gt;
                          &lt;i class=&quot;icon-cogs&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Components&lt;/span&gt;
                          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;grids.html&quot;&gt;Grids&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;calendar.html&quot;&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;charts.html&quot;&gt;Charts&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;&quot;&gt;
                          &lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Form Stuff&lt;/span&gt;
                          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;form_component.html&quot;&gt;Form Components&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;form_wizard.html&quot;&gt;Form Wizard&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;form_validation.html&quot;&gt;Form Validation&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;&quot;&gt;
                          &lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Data Tables&lt;/span&gt;
                          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;basic_table.html&quot;&gt;Basic Table&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;dynamic_table.html&quot;&gt;Dynamic Table&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class=&quot;&quot; href=&quot;inbox.html&quot;&gt;
                          &lt;i class=&quot;icon-envelope&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Mail &lt;/span&gt;
                          &lt;span class=&quot;label label-danger pull-right mail-info&quot;&gt;2&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;&quot;&gt;
                          &lt;i class=&quot;icon-glass&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Extra&lt;/span&gt;
                          &lt;span class=&quot;arrow&quot;&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;blank.html&quot;&gt;Blank Page&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;profile.html&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;invoice.html&quot;&gt;Invoice&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;404.html&quot;&gt;404 Error&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;&quot; href=&quot;500.html&quot;&gt;500 Error&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class=&quot;&quot; href=&quot;login.html&quot;&gt;
                          &lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Login Page&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- sidebar menu end--&gt;</pre>
            </pre>



            <h4> Multilevel Menu HTML</h4>
            <pre class="prettyprint lang-html linenums">
<pre class="html">
&lt;!--multi level menu start--&gt;
                  &lt;li class=&quot;sub-menu&quot;&gt;
                      &lt;a href=&quot;javascript:;&quot; &gt;
                          &lt;i class=&quot;icon-sitemap&quot;&gt;&lt;/i&gt;
                          &lt;span&gt;Multi level Menu&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class=&quot;sub&quot;&gt;
                          &lt;li&gt;&lt;a  href=&quot;javascript:;&quot;&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li class=&quot;sub-menu&quot;&gt;
                              &lt;a  href=&quot;boxed_page.html&quot;&gt;Menu Item 2&lt;/a&gt;
                              &lt;ul class=&quot;sub&quot;&gt;
                                  &lt;li&gt;&lt;a  href=&quot;javascript:;&quot;&gt;Menu Item 2.1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class=&quot;sub-menu&quot;&gt;
                                      &lt;a  href=&quot;javascript:;&quot;&gt;Menu Item 3&lt;/a&gt;
                                      &lt;ul class=&quot;sub&quot;&gt;
                                          &lt;li&gt;&lt;a  href=&quot;javascript:;&quot;&gt;Menu Item 3.1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a  href=&quot;javascript:;&quot;&gt;Menu Item 3.2&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;!--multi level menu end--&gt;</pre>

            </pre>


        </section>

        <section id="font">
            <div class="page-header"><h3> Font</h3><hr class="notop"></div>
            <p>
                FlatLab uses Open Sans font from google fonts. The font imported in main css file: <code class="code-format">css/style.css</code>
            </p>
            <pre class="prettyprint lang-html linenums">
<pre class="css">

</pre>

            </pre>
        </section>

        <section id="new_page">
            <div class="page-header"><h3> New Page</h3><hr class="notop"></div>
            <p>
                To create a new page, you can use <code class="code-format">blank.html</code>  which provides basic page layout which you can extend and modify further.
            </p>

        </section>
        <section id="js_initial">
            <div class="page-header"><h3> Javascript Initialization</h3><hr class="notop"></div>
            <p>
                Common javascript initialization implemented in  <code class="code-format">js/common-scripts.js</code>  which is need to include in all pages.
            </p>

            <pre class="prettyprint lang-html linenums">
<pre class="js">
var Script = function () {
         //Common Script Goes Here
    }();
</pre>
            </pre>

        </section>

        <section id="reference">
            <div class="page-header"><h3> Reference</h3><hr class="notop"></div>
            <p>
                Below is the list of all plugins and external resources used to power this template.
            </p>
            <table width="100%" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>URL</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td >jquery-1.10.2</td>
                        <td><a href="http://www.jquery.com" target="_blank">http://www.jquery.com</a></td>
                    </tr>
                    <tr>
                        <td>Twitter Bootstrap 3.0.2</td>
                        <td><a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a></td>
                    </tr>
                    <tr>
                        <td >jquery NiceScroll</td>
                        <td><a href="http://areaaperta.com/nicescroll/" target="_blank">http://areaaperta.com/nicescroll/</a></td>
                    </tr>
                    <tr>
                        <td >jquery scrollTo  </td>
                        <td><a href="https://github.com/flesler/jquery.scrollTo" target="_blank">https://github.com/flesler/jquery.scrollTo</a></td>
                    </tr>
                    <tr>
                      <td >Datepicker for Bootstrap</td>
                      <td><a href="http://www.eyecon.ro/bootstrap-datepicker/">http://www.eyecon.ro/bootstrap-datepicker/</a></td>
                    </tr>
                    <tr>
                      <td >Colorpicker for Bootstrap</td>
                      <td><a href="http://www.eyecon.ro/bootstrap-colorpicker/">http://www.eyecon.ro/bootstrap-colorpicker/</a></td>
                    </tr>
                    <tr>
                      <td >Date Range Picker for Bootstrap</td>
                      <td><a href="https://github.com/dangrossman/bootstrap-daterangepicker">https://github.com/dangrossman/bootstrap-daterangepicker</a></td>
                    </tr>
                    <tr>
                        <td >jQuery Tags Input</td>
                        <td><a href="http://xoxco.com/clickable/jquery-tags-input" target="_blank">http://xoxco.com/clickable/jquery-tags-input</a></td>
                    </tr>
                    <tr>
                        <td >CKEditor</td>
                        <td><a href="http://ckeditor.com/" target="_blank">http://ckeditor.com/</a></td>
                    </tr>

                    <tr>
                        <td >jQuery Slider</td>
                        <td><a href=" 	http://jqueryui.com/slider/" target="_blank"> 	http://jqueryui.com/slider/</a></td>
                    </tr>

                    <tr>
                        <td >jQuery Easy Pie Chart</td>
                        <td><a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></td>
                    </tr>

                    <tr>
                        <td >jQuery Sparklines</td>
                        <td><a href="http://omnipotent.net/jquery.sparkline " target="_blank">http://omnipotent.net/jquery.sparkline </a></td>
                    </tr>

                    <tr>
                        <td >Chartjs</td>
                        <td><a href=" 	http://www.chartjs.org/" target="_blank"> 	http://www.chartjs.org/</a></td>
                    </tr>

                    <tr>
                        <td >Morris</td>
                        <td><a href="http://www.oesmith.co.uk/morris.js/" target="_blank"> http://www.oesmith.co.uk/morris.js/</a></td>
                    </tr>

                    <tr>
                        <td >jQuery OwlCarousel v1.21</td>
                        <td><a href="http://www.owlgraphic.com/owlcarousel" target="_blank"> http://www.owlgraphic.com/owlcarousel</a></td>
                    </tr>

                    <tr>
                        <td >DataTables</td>
                        <td><a href=" http://www.datatables.net/blog/Twitter_Bootstrap_2" target="_blank"> 	http://www.datatables.net/blog/Twitter_Bootstrap_2</a></td>
                    </tr>
                    <tr>
                        <td >Responsive Table</td>
                        <td><a href=" http://elvery.net/demo/responsive-tables/" target="_blank"> 	http://elvery.net/demo/responsive-tables/</a></td>
                    </tr>

                    <tr>
                        <td > jQuery Stepy</td>
                        <td><a href=" http://wbotelhos.com/stepy" target="_blank"> 	http://wbotelhos.com/stepy</a></td>
                    </tr>

                    <tr>
                        <td > jQuery Knob</td>
                        <td><a href=" http://anthonyterrien.com/knob/" target="_blank">http://anthonyterrien.com/knob/</a></td>
                    </tr>

                    <tr>
                        <td >FullCalendar</td>
                        <td><a href=" 	http://arshaw.com/fullcalendar/" target="_blank"> 	http://arshaw.com/fullcalendar/</a></td>
                    </tr>

                    <tr>
                        <td >Gritter Notifications</td>
                        <td><a href="http://boedesign.com/demos/gritter/" target="_blank">http://boedesign.com/demos/gritter/</a></td>
                    </tr>

                    <tr>
                        <td >jQuery Validation Plugin</td>
                        <td><a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a></td>
                    </tr>
                    <tr>
                        <td >Font Awesome 4.0.3</td>
                        <td><a href="http://fontawesome.io/" target="_blank">http://fontawesome.io/</a></td>
                    </tr>
                    <tr>
                        <td>Nestable</td>
                        <td><a href="https://github.com/dbushell/Nestable" target="_blank">https://github.com/dbushell/Nestable</a></td>
                    </tr>
                    <tr>
                        <td>Dropzone</td>
                        <td><a href="http://www.dropzonejs.com/" target="_blank">http://www.dropzonejs.com/</a></td>
                    </tr>
                    <tr>
                        <td>Input Mask</td>
                        <td><a href="http://jasny.github.io/bootstrap/javascript.html#inputmask" target="_blank">http://jasny.github.io/bootstrap/javascript.html#inputmask</a></td>
                    </tr>
                    <tr>
                        <td>FancyBox</td>
                        <td><a href="http://fancybox.net/" target="_blank">http://fancybox.net/</a></td>
                    </tr>
                    <tr>
                        <td>jQuery UI Touch Punch</td>
                        <td><a href="http://touchpunch.furf.com/" target="_blank">http://touchpunch.furf.com/</a></td>
                    </tr>
                    <tr>
                        <td>Flot Charts</td>
                        <td><a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></td>
                    </tr>

                    <tr>
                        <td>jQuery Multi Select</td>
                        <td><a href="http://loudev.com/" target="_blank">http://loudev.com/</a></td>
                    </tr>

                    <tr>
                        <td>Bootstrap Timepicker</td>
                        <td><a href="http://jdewit.github.com/bootstrap-timepicker/" target="_blank">http://jdewit.github.com/bootstrap-timepicker/</a></td>
                    </tr>

                    <tr>
                        <td>Bootstrap WYSIWYG5</td>
                        <td><a href="http://jhollingworth.github.com/bootstrap-wysihtml5/" target="_blank"> 	http://jhollingworth.github.com/bootstrap-wysihtml5/</a></td>
                    </tr>

                    <tr>
                        <td>jQuery jCrop</td>
                        <td><a href="http://github.com/tapmodo/Jcrop" target="_blank">http://github.com/tapmodo/Jcrop</a></td>
                    </tr>

                    <tr>
                        <td>Bootstrap FuelUX Input Spinner</td>
                        <td><a href="http://exacttarget.github.io/fuelux/#spinner" target="_blank">http://exacttarget.github.io/fuelux/#spinner</a></td>
                    </tr>

                    <tr>
                        <td>xChart</td>
                        <td><a href="http://tenxer.github.io/xcharts/" target="_blank">http://tenxer.github.io/xcharts/</a></td>
                    </tr>

                    <tr>
                        <td>Sortable</td>
                        <td><a href="http://jqueryui.com/sortable/" target="_blank">http://jqueryui.com/sortable/</a></td>
                    </tr>
                    <tr>
                        <td>Bootstrap FuelUX Tree</td>
                        <td><a href="http://exacttarget.github.io/fuelux/#tree" target="_blank">http://exacttarget.github.io/fuelux/#tree </a></td>
                    </tr>
                    <tr>
                        <td>jQuery File Upload</td>
                        <td><a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">http://blueimp.github.io/jQuery-File-Upload/</a></td>
                    </tr>

                </tbody>
            </table>
        </section>

        <section id="upgrade">
            <h3>Upgrade</h3><hr class="notop">
            <p>

                To upgrade from v1.3.2 to v1.3.3 you may replace the assets, img, css and js folder.</p>

            <p> Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at  <a href="mailto:dkmosa@gmail.com">dkmosa@gmail.com</a></p>
        </section>

        <section id="end_documentation">
            <div class="page-header"><h3> End of Documentation</h3><hr class="notop"></div>
            <p>
                Once again, thanks for purchasing FlatLab.
            </p>
        </section>

    </div>
</body>
</html>